<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form @submit="handleSubmit" :form="form">
        <div class="form-item-row">
            <a-form-item
            label="任务类型"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
                <a-select v-decorator="[
                    'task_id',
                    {rules: [{ required: true }]}
                ]">
                    <a-select-option v-for="(item,key) in taskIdList" :key="key" :value="item.id" @click="setTypeList(item)">{{item.task_name}}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item
                label="任务链接"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
                <a-input
                v-decorator="[
                    'task_url',
                    {rules: [{ required: true }]}
                ]"
                name="task_url"
                placeholder="任务链接" />
            </a-form-item>
        </div>
        <div class="form-item-row">
            <a-form-item
                label="任务进度数量"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
                <a-input    
                v-decorator="[
                    'task_progress',
                    {rules: [{ required: true }]}
                ]"
                name="task_progress"
                placeholder="任务数量" />
            </a-form-item>
            <a-form-item
                label="任务需求"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
                <a-input
                v-decorator="[
                    'task_note',
                    {rules: [{ required: true }]}
                ]"
                name="task_note"
                placeholder="任务需求" />
            </a-form-item>
        </div>
       <div class="form-item-row">  
            <a-form-item
                label="发布人"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
                <a-input
                v-decorator="[
                    'task_release',
                    {rules: [{ required: true }]}
                ]"
                name="task_release"
                placeholder="发布人" />
            </a-form-item>
            <a-form-item
                label="奖励积分数"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
                <a-input
                v-decorator="[
                    'task_integral',
                    {rules: [{ required: true }]}
                ]"
                name="task_integral"
                placeholder="奖励积分" />
            </a-form-item>
        </div>
        <div class="form-item-row">
            <a-form-item
                label="任务内容"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
                <a-radio-group v-decorator="['task_type',  {rules: [{ required: true }]}]">
                    <a-radio :value="item" v-for="(item,key) in taskTypeList" :key="key">
                    {{item}}
                    </a-radio>
                </a-radio-group>
                <!-- <a-checkbox-group @change="onTypeChange"  v-decorator="['task_type',  {rules: [{ required: true }]}]">
                    <a-row>
                    <a-col :span="8"><a-checkbox value="0">点赞</a-checkbox></a-col>
                    <a-col :span="8"><a-checkbox value="1">关注</a-checkbox></a-col>
                    <a-col :span="8"><a-checkbox value="2">评论</a-checkbox></a-col>
                    </a-row>
                </a-checkbox-group> -->
            </a-form-item>
            <a-form-item
                label="交付时间"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
                <a-date-picker  v-decorator="['task_ok_time',  {rules: [{ required: true }]}]" />
            </a-form-item>
        </div>
        <!-- <div class="form-item-row">
            <a-form-item
                label="第三方转换"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
                <a-radio-group v-decorator="['url_check',  {rules: [{ required: true }]}]">
                    <a-radio value="1">
                    获取抖音ID
                    </a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item>
            </a-form-item>
        </div> -->
        <a-form-item
            :wrapperCol="{ span: 24 }"
            style="text-align: center"
        >
            <a-button style="margin-right:30px;" @click="goBack">返回</a-button>
            <a-button style="margin-right:30px;" @click="resetForm">重置</a-button>
            <a-button htmlType="submit" type="primary">提交</a-button>
        </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import moment from 'moment'
import { taskRelease, taskLists } from '@/api/getData'

const typeList = [
  [
    {
    "label": '全部',
    "value": 0
    }
  ],
  [
    {
    "label": '点赞',
    "value": 1
    },
    {
    "label": '关注',
    "value": 2
    },
    {
    "label": '评论',
    "value": 3
    }
  ],
  [
    {
    "label": '阅读',
    "value": 5
    }
  ],
  [
    {
    "label": '商家',
    "value": 6
    }
  ]
]
export default {
  name: 'NewTask',
  data () {
    return {
        description: '',
        value: 1,
        form: this.$form.createForm(this),
        taskIdList: [],
        taskTypeList: []
    }
  },
  created () {
    taskLists(1).then(res=>{
        // console.log(res)
        let list  = res.data.list;
        this.taskIdList = list
    })
  },
  methods: {
    goBack(){
        this.$router.back()
    },
    setTypeList(item){
        this.taskTypeList = item.task_type
        this.form.setFieldsValue({
            task_type:''
        });
    },
    resetForm(){
        this.form.resetFields()
        this.taskTypeList = []
    },  
    handadleSuccess(){
        let that = this
        this.$confirm({
            title: '新增成功是否返回任务列表?',
            content: '',
            onOk() {
               that.goBack()
            },
            onCancel() {
                that.resetForm()
            }
        });
    },
    // handler
    handleSubmit (e) {
        let that = this;
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // eslint-disable-next-line no-console
        //   console.log('Received values of form: ', values)
         this.$confirm({
            title: '确认新增任务?',
            content: '',
            onOk() {
                let task_id = values.task_id
                let task_url = values.task_url
                let task_progress = values.task_progress
                let task_release = values.task_release
                let task_integral = values.task_integral
                let task_type = values.task_type
                // let url_check = values.url_check
                let task_ok_time = moment(values.task_ok_time).format("YYYY-MM-DD hh:mm:ss");  
                let task_note = values.task_note

                taskRelease(task_id, task_url, task_progress, task_integral, task_release, task_ok_time, task_type, task_note).then(res=>{
                    console.log(res)
                    if(res.code == 200){
                       that.$message.info(res.msg);
                       that.handadleSuccess()
                    }else{
                        that.$message.error(res.msg);
                    }
                })
            },
            onCancel() {}
        });
          
        }
      })
    }
  }
}
</script>

<style scoped>
.form-item-row{
    display: flex;
}
.form-item-row>div{
    flex: 1;
}
.ant-checkbox-group{
    line-height: 40px !important;
}
</style>
